<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>权限管理</title>
	<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="${root}/static/css/treeview.min.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${root}/static/js/treeview.min.js"></script>
    <script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
    <script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
    <script type="text/javascript">
	    $(function(){
	    	var url = "${root}/manage/perm/permlist";
			$.getJSON(url,function(res){
				var i = 0;
				$(res).each(function(){
					i++;
					var chk;
					if(i%4==0){
						chk = $('<input id="chk'+i+'" type="checkbox" lang="'+
								this.pmid+'" /><label for="chk'+i+'">'+this.pmtitle+'</label><br/>');
					}else{
						chk = $('<input id="chk'+i+'" type="checkbox" lang="'+
								this.pmid+'" /><label for="chk'+i+'">'+this.pmtitle+'</label>');
					}
					chk.appendTo($(".modal-body"));
				});
			});
			
			$("#ok").click(function(){
				var rid = $("#rid").val();
				var pids = '';
				$("input[type='checkbox']:checked").each(function(){
					pids+=$(this).attr("lang")+"#";
				});
				if(pids.length==0){
					alert("至少关联一个权限")
				}else{
					var url = "${root}/manage/roleperm/updateperm";
					var data = {"rid":rid,"pids":pids};
					$.post(url,data,function(res){
						if(res.code==200){
							alert(res.message);
							$("#mymodal").modal("hide");
						}
					},"json");
				}
				
			});
	    	
        	var url = "${root}/manage/perm/rolelist";
        	$.getJSON(url,function(res){
        		$("tbody").empty();
        		$(res).each(function(){
        			var row = $("<tr></tr>");
					var reid = this.reid;
					var rename = this.rename;
					var renamezh = this.renamezh;
					row.append("<td>"+this.reid+"</td>");
					row.append("<td>"+this.rename+"</td>");
					row.append("<td>"+this.renamezh+"</td>");
					var td =$("<td></td>");
					var manage =$('<a href="javascript:void(0);"><button class="btn btn-info">管理</button></a>');
					
					var title = this.rename+'-'+this.renamezh;
					manage.click(function(){
						$("#title").text(title);
						//角色id
						$("#rid").val(reid);
						//角色关联权限列表
						var url = "${root}/manage/roleperm/permlist";
						var data = {"rid":reid};
						var perms;
						//必须同步处理
						$.ajax({
		            		async:false,
		            		type:"post",
		            		dataType:"json",
		            		url:url,
		            		data:data,
		            		success:function(res){
		            			if(res.code=="500"){
    								alert(res.message);
		            			}
		            			perms = $(res);
		            		},
		            		error:function(){
		            			alert('网络延时 请重试');
		            		}
		            	});
						//用户的原角色信息关联
						$("input[type='checkbox']").prop("checked",false).each(function(){
							for(var i=0;i<perms.length;i++){
								if(perms[i].rppmid==$(this).attr("lang")){
									$(this).prop("checked",true);
								}
							}
						});

						$("#mymodal").modal("show");
						return;
	    			});
					td.append(manage)
					row.append(td);
					row.appendTo($("tbody"));
        		});
        	});
        	
	    });
    </script>
</head>
<body>
	<div id="app" class="container-fluid">
		<table class="table">
			<caption>角色列表</caption>
			<thead>
				<tr>
					<th>编号</th>
					<th>角色名</th>
					<th>角色中文名</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	 	<div id="mymodal" class="modal">
            <div class="modal-dialog" data-backdrop="static">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal"> &times; </button>
                        <h4 id="title"></h4>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer">
                    	<input type="hidden" id="rid" />
                        <button id="ok" class="btn navbar-btn glyphicon glyphicon-ok">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>